<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_userFragment :: headAddCss(~{::title},'/css/register.css')">
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <link rel="stylesheet" href="../static/css/main.css">
    <link rel="stylesheet" href="../static/css/register.css">
    <script src="../static/layui/layui.js"></script>
</head>
<body>
<div class="layui-col-md4 layui-col-md-offset4" >
    <div id="card" class="layui-card">
        <div class="layui-card-header" id="loginHeader">用户注册</div>
        <div class="layui-card-body">
            <!--form表单-->
            <form class="layui-form" action="#" th:action="@{/submitRegister}" method="post">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" id="userName" name="userName" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid"><i id="icon"></i></div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="userPassword" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">重复密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="rePassword" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手机</label>
                    <div class="layui-input-inline">
                        <input type="tel" name="userPhone" lay-verify="required|phone"  placeholder="请输入手机" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-inline">
                        <input type="text" name="userEmail" lay-verify="email"  placeholder="请输入邮箱" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">身份</label>
                    <div class="layui-input-inline">
                        <select name="userRole" lay-verify="required">
                            <option value=""></option>
                            <option value="学生">学生</option>
                            <option value="资助管理员">资助管理员</option>
                            <option value="系统管理员">系统管理员</option>
                        </select>
                    </div>
                </div>
                <a href="#" th:href="@{/}" style="float: right;margin-bottom: 8px;color: blue;">已有账号？去登陆</a>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button id="btn" class="layui-btn" lay-submit lay-filter="formDemo">注册</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

</body>
<script>
    layui.use('form', function(){
    });
    //弹出消息
    layui.use('layer', function(){
        var layer = layui.layer;
        var msg = "[[${msg}]]";
        if (msg!=null&&msg!=""){
            layer.msg(msg);
        }
    });
    layui.use('jquery',function () {
        var $ = layui.$;
        //用户名重复验证
        $("#userName").blur(function(){
            if ($(this).val()!==""){
                $.get({
                    url:"/userName?userName="+$(this).val(),
                    success: function (data) {
                        if (data){
                            $("#icon").css({
                                "color":"#5FB878"
                            }).attr("class","layui-icon layui-icon-ok-circle")
                            $("#btn").removeClass("layui-btn-disabled").removeAttr("disabled");
                        }else{
                            $("#icon").css({
                                "color":"red"
                            }).attr("class","layui-icon layui-icon-close-fill")
                            $("#btn").addClass("layui-btn-disabled").attr("disabled","disabled");
                        }
                    }
                });
            }
        });
    });
</script>
</html>